<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>首页</title>
    <#include "../common.ftl" />
    <link href="${ticket.contextPath}/static/admin/css/dashboard.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>	
          <a class="navbar-brand" href="#">Ticket后台管理系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right" id="daohang">
          	<li class="dropdown">
          		<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">首页<span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#" data="welcome">欢迎页</a></li>
		            <li><a href="#" data="center">个人中心</a></li>
		            <li><a href="#" data="authority">权限管理</a></li>
		            <li><a href="#" data="roles">角色配置</a></li>
		            <li><a href="#" data="order">订单</a></li>
		          </ul>
          	</li>
            <li><a href="#">用户管理</a></li>
            <li><a href="#">订单管理</a></li>
            <li><a href="#">系统管理</a></li>
            <li><a href="logout">安全退出</a></li>
          </ul>
          <#--<form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="搜索...">
          </form>-->
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#" data="welcome">欢迎页 <span class="sr-only">(current)</span></a></li>
            <li><a href="#" data="center">个人中心</a></li>
            <li><a href="#" data="authority">权限管理</a></li>
            <li><a href="#" data="roles">角色配置</a></li>
            <li><a href="#" data="order">订单</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="father">
        	<iframe id="myiframe" width="100%" src="welcome" data-id="0" scrolling="auto" frameborder="0" onload="changeFrameHeight()"></iframe>
        	<script>
                $(function(){
                    $('.nav-sidebar li').on('click', function (event) {
                        var $child = $(this.firstElementChild)
                        var $frame = $('#myiframe')
                        var $this = $(this)
                        var $active = $('.nav-sidebar .active ')
                        if($frame.attr('src') == $child.attr('data')){
                            window.location.reload()
                        }else{
                            $active.removeClass('active')
                            $frame.attr("src",$child.attr("data"))
                            $this.addClass('active')
                        }
                    });
                    $('.dropdown-menu li').on('click', function (event) {
                        var $child = $(this.firstElementChild)
                        var $frame = $('#myiframe')
                        var $this = $(this)
                        var $active = $('.nav-sidebar .active ')
                        var $menuActive = $('.dropdown-menu .active ')
                        if($frame.attr('src') == $child.attr('data')){
                            window.location.reload()
                        }else{
                            $active.removeClass('active')
                            $menuActive.removeClass('active')
                            $frame.attr("src",$child.attr("data"))
                            $this.addClass('active')
                        }
                    });
                })
        		function changeFrameHeight(){
				    var ifm= document.getElementById("myiframe"); 
				    var height = window.innerHeight-45;
				    var ff=document.getElementById("father"); 
				    ifm.height=height;
				    ff.height=height;
				}
				window.onresize=function(){  
				     changeFrameHeight();  
				}

            </script>
        </div>
      </div>
    </div>
  </body>
</html>
